<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./homepage.css">
</head>
<body>
    <div class="header">
        <img src="./img/OIP-C.jpg" alt="">
        <span>admin</span>
    </div>
    <div class="NO1">
        <div class="ranking">排行榜</div>
        <a href=""><div class="img"><img src="./img/sousuo.jpg" alt=""></div></a>
    </div>
   <div class="navigation">
    <span class="s1">排名</span>
    <span class="s2">产品信息</span>
    <span class="s3">购买人数</span>
   </div>
   <!-- 产品1 -->
   <div class="detail">
       <div class="ranking2">1</div>
       <!-- 插入商品详情页面 -->
       <a href="">
            <div class="commodity">
            <div class="img"><img src="./商品img/R-C (1).jpg" alt=""></div>
            <div class="text"> <span>松下生活电器吸尘器MC-C10G家用大力吸<br>宠物猫手持</span> </div> 
            </div>
        </a>
       <div class="purchase">800</div>
   </div>
   <!-- 产品2 -->
   <div class="detail">
    <div class="ranking3">2</div>
    <!-- 插入商品详情页面 -->
    <a href="">
         <div class="commodity">
         <div class="img2"><img src="./商品img/20190510095729724.png" alt=""></div>
         <div class="text"> <span>送酒具桃花醉桃花酒10斤桃花酿彩虹斗酒<br>晕茶醉三仙熊猫仙酒</span> </div> 
         </div>
     </a>
    <div class="purchase">700</div>
    <!-- 产品3 -->
    </div>
    <!-- 产品3 -->
    <div class="detail">
        <div class="ranking4">3</div>
        <!-- 插入商品详情页面 -->
        <a href="">
             <div class="commodity">
             <div class="img3"><img src="./商品img/twUonex0XZlenxLz0NL3bQ.jpg" alt=""></div>
             <div class="text"> <span>老谷头肉苁蓉片干片泡水茶酒料内蒙古阿拉善<br>原产地苁蓉片</span> </div> 
             </div>
         </a>
        <div class="purchase">500</div>
    </div>
    <!-- 产品4 -->
    <div class="detail">
        <div class="ranking5">4</div>
        <!-- 插入商品详情页面 -->
        <a href="">
             <div class="commodity">
             <div class="img3"><img src="./商品img/ChMkJlbKzW-Ie81FAAudp50bW90AALJAwM5FdgAC52_489.jpg" alt=""></div>
             <div class="text"> <span>老谷头肉苁蓉片干片泡水茶酒料内蒙古阿拉善<br>原产地苁蓉片</span> </div> 
             </div>
         </a>
        <div class="purchase">400</div>
    </div>
    <!-- 产品5 -->
    <div class="detail">
        <div class="ranking6">5</div>
        <!-- 插入商品详情页面 -->
        <a href="">
             <div class="commodity">
             <div class="img3"><img src="./商品img/HUAWEI.jpg" alt=""></div>
             <div class="text"> <span>老谷头肉苁蓉片干片泡水茶酒料内蒙古阿拉善<br>原产地苁蓉片</span> </div> 
             </div>
         </a>
        <div class="purchase">300</div>
    </div>
    <div class="page">
        <span><a href="">上一页</a> </span>
        <a href="">&nbsp;1</a>
        <a href="">&nbsp;2</a>
        <a href="">&nbsp;3</a>
        <a href="">&nbsp;4</a>
        <a href="">&nbsp;5</a>
        <a href="">&nbsp;6</a>
        <a href="">...</a>
        <a href="">20</a>
        <span><a href="">下一页</a> </span>
    </div>
</body>
</html>